import React, {Component} from 'react'
import './index.less'
import EmojiList from 'components/common/emojiList'
import { observer } from 'mobx-react/custom'
import PostVM from 'cvm/post'

const Content = observer(({ vm }) => {
  return (
    <div className='textarea-box'>
      <textarea value={vm.content}
        onChange={vm.handleChangeContent}
        ref='contentTextarea' name='' id='' rows='10'
        placeholder='写下你要说的话，不能少于七个字，不能超过700字哦' />
      <div className='add-img'>
        <img onClick={() => vm.handleChangeIcon('imgIcon')} src={vm.imgIcon} alt='' />
        <img onClick={() => vm.handleChangeIcon('emojiIcon')} src={vm.emojiIcon} alt='' />
        <div onClick={vm.handlePostContent}
          className='send-writing'
          style={vm.submitStyle} >发送</div>
      </div>
    </div>
  )
})

const Captions = observer(({ vm }) => {
  if (vm.selectIcon === 'imgIcon') {
    return (
      <div className='upload-img'>
        {vm.selectedImages.length > 0 &&
          vm.selectedImages.map((item, index) => {
            return <span key={index} className=''>
              <img src={item.img} alt='' className='user-img' />
              <img onClick={() => vm.handleDeleteImage(item)}
                src={require('images/close-img.png')}
                alt='' className='close-img' />
            </span>
          })}
        {vm.selectedImages.length < 8 &&
          <span className='add-img-btn'>
            <img src={require('images/add.png')} alt='' />
            <input onChange={vm.handleImageChange} type='file' id='multiple' />
          </span>}
      </div>
    )
  } else {
    return <EmojiList onClickItem={vm.handleEmojiItem} />
  }
})

@observer
export default class Post extends Component {
  vm = new PostVM({history: this.props.history})
  constructor (props) {
    super(props)
    window.document.title = '发帖'
  }

  render () {
    return (
      <div>
        {<Content vm={this.vm} />}
        {<Captions vm={this.vm} />}
      </div>
    )
  }
}
